[<tag type="if" function="productcount" modulekey="{Settings:modulekey}" testvalue="0" display="{OFF}" />]<!-- Hide product list when current category has zero items -->
<!-- Product List footer -->

</div>

[<tag type="if" function="debugmode" display="{ON}" />]
<div class="debug">[<tag type='valueof' resourcekey='General.DebugMessage' />]</div>
[<tag type="endif" />]

</div>

<!-- Masonry Grid http://masonry.desandro.com -->
<script type="text/javascript">

$( document ).ready(function() {

var $container = $('#listwrapper').masonry({
  columnWidth: [Settings:itemwidth], // List item width - Can also use CSS width of first list item
  itemSelector: '.product',
  gutter: [Settings:itemgutter], // Set horizontal gap and include in calculations. Also used in CSS for vertical gap
  isOriginLeft: true, // Build from right to left if false
  isOriginTop: true, // Build from bottom to top if false
});

// initialize Masonry after all images have loaded - Webkit needs this when image containers don't have a fixed height
$container.imagesLoaded( function() {
  $container.masonry();
});

});

</script>

[<tag type="endif"  />]<!-- End hide product list when current category has zero items -->
